<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>{$info['title']}预订-{$webname}</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="../addons/jy_tour/resource/mobile/css/base/base.css">
	<link rel="stylesheet" href="../addons/jy_tour/resource/mobile/css/base/mobilebone.css">
	<link rel="stylesheet" href="../addons/jy_tour/resource/mobile/css/base/swiper.min.css">
	<link rel="stylesheet" href="../addons/jy_tour/resource/mobile/css/base/reset-style.css">
	<link rel="stylesheet" href="../addons/jy_tour/resource/mobile/css/way/show.css">
	<script type="text/javascript"  src="../addons/jy_tour/resource/mobile/js/base/swiper.min.js" charset="utf-8"></script>
	<script type="text/javascript"  src="../addons/jy_tour/resource/mobile/js/base/lib-flexible.js" charset="utf-8"></script>
	<script type="text/javascript"  src="../addons/jy_tour/resource/mobile/js/base/delayLoading.min.js" charset="utf-8"></script>
	<script type="text/javascript"  src="../addons/jy_tour/resource/mobile/js/base/jquery.layer.js" charset="utf-8"></script>
	<script type="text/javascript"  src="../addons/jy_tour/resource/mobile/js/layer2.0/layer.js" charset="utf-8"></script>
    <style>.sum-group-box .type .info-icon.hide{display:none;}</style>
</head>
<body bottom_border=yCprGj >


<div class="page in" id="lineShowInfo">
        <script>
        $('h1.page-title-bar').text('选择套餐团期和人数');
        </script>
        <!-- 公用顶部 -->
        <div class="page-content">

            <div class="tc-module-block">
                <div class="tc-module-bar">
                    <span class="tit">套餐类型</span>
                </div>
                <ul class="tc-group-box">
                 {loop $suitlist $suit}
                    <li class="item suite_item" data-id="{$suit['id']}" data-minprice="{$suit['minprice']}" class="item {if $suit['id']==$suitid}active{/if}">{$suit['suitname']}</li>
                 {/loop}
                </ul>
            </div>
            <!-- 套餐类型 -->

            <div class="tc-module-block">
                <div class="tc-module-bar">
                    <span class="tit">出发日期</span>
                   <span class="sub">*建议提前<span class="num">{{way.linebefore}}</span>天预订</span>
                </div>
                <div class="calendar-wrapper" id="calendarWrapper"></div>
            </div>
            <!-- 出发日期 -->

            <div class="tc-module-block hide suit_item_number">
                <div class="tc-module-bar">
                    <span class="tit">选择数量</span>
                </div>
                <ul class="sum-group-box">
                    <li class="hide hasadult">
                        <span class="type">成人<i class="info-icon hide adultdesc" data="adultdesc"></i></span>
                        <span class="pri adult_price"></span>
                        <span class="amount-opt-wrap">
                            <span class="sub-btn">-</span>
                            <input type="text" readonly class="num-text" data="adult_num" value="0" />
                            <span class="add-btn">+</span>
                        </span>
                    </li>
                    <li class="hide hasold">
                        <span class="type">老人<i class="info-icon hide olddesc" data="olddesc"></i></span>
                        <span class="pri old_price"></span>
                        <span class="amount-opt-wrap">
                            <span class="sub-btn">-</span>
                            <input type="text" readonly class="num-text" data="old_num" value="0" />
                            <span class="add-btn">+</span>
                        </span>
                    </li>
                    <li class="hide haschild">
                        <span class="type">儿童<i class="info-icon hide childdesc" data="childdesc"></i></span>
                        <span class="pri child_price"></span>
                        <span class="amount-opt-wrap">
                            <span class="sub-btn">-</span>
                            <input type="text" readonly class="num-text"  data="child_num" value="0" />
                            <span class="add-btn">+</span>
                        </span>
                    </li>
                    <li class="hide roombalance">
                        <span class="type">单房差<i class="info-icon hide roomdesc" data="roomdesc"></i></span>
                        <span class="pri roombalance_price"></span>
                        <span class="amount-opt-wrap">
                            <span class="sub-btn room_balance">-</span>
                            <input type="text" readonly class="num-text" data="roombalance_num" value="0" />
                            <span class="add-btn room_balance">+</span>
                        </span>
                    </li>
                </ul>
            </div>
            <!-- 选择数量 -->

            <div class="tc-explain-block suit_description">
               
            </div>
            <!-- 报价说明 -->

            <div class="tc-placeholder-bar">
                <div class="tc-fixed-bar">
                    <span class="total">总额：<span class="pri total_price">--</span></span>
                    <span class="label" id="pay_method"></span>
                    <a href="" class="btn-booking disable">下一步</a>
                </div>
            </div>
            <!-- 底部漂浮栏 -->

        </div>

    </div>
    <!-- 选择套餐 -->
</body>
<script>
    //参数初始化
    var param;
    function initParam(){
        return {hasPrice:0,currency:'{Currency_Tool::symbol()}',productid:'{$info["id"]}',suitid:0,usedate:0,adult_num:0,child_num:0,old_num:0,roombalance_num:0,order_num:0};
    }
    //日历 
    var calendarWrapper = document.getElementById('calendarWrapper');
    var calendarWeekBar = document.createElement('div');
    var calendarDateBar = document.createElement('div');
    var calendarBox = document.createElement('div');
    calendarBox.className = 'calendar-box';

    var getDate = new Date();
    var curYear = getDate.getFullYear();
    var curMonth = getDate.getMonth();

    var monthData = [31,getLeapYear(curYear),31,30,31,30,31,31,30,31,30,31];

    calendarWrapper.appendChild(calendarWeekBar);
    calendarWrapper.appendChild(calendarDateBar);
    calendarWrapper.appendChild(calendarBox);

    var nextMonth = calendarWrapper.querySelector('.next');
    var prevMonth = calendarWrapper.querySelector('.prev');
    var dateLimit =['{date("Ym")}']

    renderHtml();

    //上一月
    function prev(n){
        if($(n).hasClass('disable')){
            return false;
        }
        if(curMonth === 0)
        {
            curMonth = 12;
            curYear -= 1;
        }
        if(curMonth < 13)
        {
            curMonth -= 1;
        }
        renderHead();
        renderHtml();
        setDateLimit();
    }

    //下一月
    function next(n){
        if($(n).hasClass('disable')){
            return false;
        }
        if(curMonth<12)
        {
            curMonth += 1;
        }
        if(curMonth === 12)
        {
            curMonth = 0;
            curYear += 1;
        }
        renderHead();
        renderHtml();
        setDateLimit();
    }

    //渲染头部
    function renderHead(){

        var getMonth = curMonth + 1;

        calendarWeekBar.className = 'calendar-week-bar';
        calendarWeekBar.innerHTML = '<li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>';

        calendarDateBar.className = 'calendar-date-bar';
        calendarDateBar.innerHTML = '<i class="prev" id="prev" onclick="prev(this)"></i><span class="showDate">'+ curYear + '年' + getMonth +'月</span><i class="next" onclick="next(this)"></i>';

        setDateLimit();
    }
    function setDateLimit(){
        if(dateLimit[0]>=(curYear+''+padStr(curMonth+1,2))){
            $('#prev').addClass('disable');   
        }else{
            $('#prev').removeClass('disable'); 
        }   
    } 

    //渲染主体
    function renderHtml(){
        var data=[];
        var curDay='{date("Ymd")}'
        if(param && param['suitid']){
            $.ajax({
                type:'GET',
                url:SITEURL+'line/ajax_price_calendar_new',
                data:{productid:param['productid'],suitid:param['suitid'],date:curYear+''+padStr(curMonth+1,2)+'01'},
                async: false,
                dataType:'json',
                success:function(rs)
                {
                    data=rs;
                    for(var i in data){
                        param['hasPrice']=1;
                        break;
                    }
                }
            })
        }  
        var firstDay = new Date(curYear,curMonth, 1);
        var lastDay = new Date(curYear,curMonth+1, 1);
        var firstDayWeek = firstDay.getDay();
        var lastDayWeek = lastDay.getDay();

        var prevDateArr = [];
        var nextDateArr = [];

        for(var d=0; d<firstDayWeek; d++){
            prevDateArr.push(new Date(curYear,curMonth,-d).getDate());
        }

        prevDateArr = prevDateArr.reverse();

        for(var e=1; e<=7-lastDayWeek; e++){
            nextDateArr.push(new Date(curYear,curMonth+1,e).getDate());
        }

        renderHead();

        var htmlStr = '<table><tbody>';

        var trSum = Math.ceil((monthData[curMonth] + firstDayWeek) / 7);

        for(var i=0; i<trSum; i++){
            htmlStr += '<tr>';
            for(var j=0; j<7; j++){
                var index = i*7 + j;
                var dateNum = index - firstDayWeek + 1;
                if(dateNum <= 0){
                    htmlStr += '<td class="p-item"><span class="day">'+ prevDateArr[j] +'</span></td>'
                }
                else if(dateNum > monthData[curMonth]){
                    htmlStr += '<td class="n-item"><span class="day">'+ nextDateArr[j - lastDayWeek] +'</span></td>'
                }
                else{
                    var d=curYear+''+padStr(curMonth+1,2)+padStr(dateNum,2);
                    if(data[d]){
                       data[d]['usedate']=curYear+'-'+padStr(curMonth+1,2)+'-'+padStr(dateNum,2);
                       if(d==curDay){
                          dateNum='今天';
                       }
                       htmlStr += '<td class="c-item" data=\''+JSON.stringify(data[d])+'\'><span class="day">'+ dateNum +'</span><span class="pri">{Currency_Tool::symbol()}'+data[d]['price']+'</span><span class="stock">'+((data[d]['number']>=100 || data[d]['number']==-1)?'充足':('余位'+data[d]['number']))+'</span></td>'
                    }else{
                        htmlStr += '<td class="n-item"><span class="day">'+dateNum +'</span></td>'  
                    }
                }
            }
            htmlStr += '</tr>';
        }

        htmlStr += '</table></tbody>';
        calendarBox.innerHTML = htmlStr;
        //绑定事件
        $('.c-item').click(function(){
            $('.calendar-box').find('.c-item').removeClass('active');
            $(this).addClass('active');
             var data=JSON.parse($(this).attr('data'));
             param['price']=data;
             param['usedate']=data['usedate'];
             if(data['number']!=0){
                $('.suit_item_number .add-btn').removeClass('disable');
             }
             var price=['adult_price','child_price','old_price','roombalance_price'];
             for(var p in price){
                var node=$('.'+price[p]);
                if(price[p]=='roombalance_price'){
                    price[p]='roombalance';
                }
                node.text(param['currency']+data[price[p]]+'/人');
             }
            param['order_num']=1; 
            $('.suit_item_number input').eq(0).val(1);
            listenNumber();
        });
    }
    
    //判断闰年
    function getLeapYear(year){
        return (year%400 === 0) || (year%4 === 0 && year%100 != 0) ? 29 : 28
    }
    //填充0
    function padStr(str,num){
        var l = str.toString().match(/[0-9]/g);
        if(l.length<num){
          for(var i=0;i<num-l.length;i++){
            str='0'+str;
          }
        }
        return str;
    }
    $(function(){
        $('.suite_item:eq(0)').trigger('click');
    })
    //选择套餐
    $('.suite_item').click(function(){
        param=initParam();
        $('.btn-booking').addClass('disable');
        $(this).addClass('active').siblings().removeClass('active');
          param.suitid=$(this).attr('data-id');
          $.ajax({
            data:param,
            url:SITEURL+'line/ajax_suit_people',
            dataType:'json',
            type:'get',
            success:function (data) {
                 param['suit']=data;
                 var man=['hasadult','haschild','hasold','roombalance'];
                 for(var i in man){
                    if(data[man[i]] && data[man[i]]>0){
                        $('.'+man[i]).removeClass('hide');
                    }else{
                        $('.'+man[i]).addClass('hide'); 
                    } 
                 }
                 var icon=['adultdesc','olddesc','childdesc','roomdesc'];
                 for(var j in icon){
                    if(data['row'][icon[j]]){
                        $('.'+icon[j]).removeClass('hide');
                    }else{
                        $('.'+icon[j]).addClass('hide'); 
                    } 
                 }
                 $('.suit_item_number').removeClass('hide');
                 $('#pay_method').text(data['row']['paytype_name']);
                 $('.suit_description').html(data['row']['description']);
                 $('.suit_item_number').find('.pri').text('');
                 $('.suit_item_number .sub-btn,.suit_item_number .add-btn').addClass('disable');
                 $('.suit_item_number input').val(0);
                 $('.total_price').text('--');
                 //重新生成日历
                 renderHtml();
            }
        })
    });
    //
    $('.info-icon').click(function(){
        var d=$(this).attr('data');
        if(param && param['suit']['row'][d]){
            layer.open({
                btn: '确定',
                className: 'layer-define-wrapper',
                content: param['suit']['row'][d]
            })
        }
    });

    
    //减少
    $('.suit_item_number .sub-btn').not('.disable').click(function(){
         var input=$(this).next('input');
         var val=input.val();
         --val;
         if(val<=0){
            if(val<0){
               return;
            }
         }
         if(!$(this).hasClass('room_balance')){
            --param['order_num'];
         }
         input.val(val);
         listenNumber();
    });
    //新增
    $('.suit_item_number .add-btn').not('.disable').click(function(){
        var input=$(this).prev('input');
        var val=input.val();
        if(!$(this).hasClass('room_balance')){
            if(param['price']['number']!=-1 && param['order_num']>=param['price']['number']){
                return;
            }
            ++param['order_num'];
        }else{
            if(val>=param['order_num']){
                 return; 
            }
        } 
        ++val;
        input.val(val);
        listenNumber();
    });
    //监听预订数量
    function listenNumber(){
       $('.suit_item_number input').each(function(){
           var val=$(this).val();
           var prev=$(this).prev();
           var next=$(this).next();
           var attr=$(this).attr('data');
           //增加
           if(attr=='roombalance_num'){
               if(val<param['order_num']){
                   next.removeClass('disable');
               }else{
                   val=param['order_num'];
                   $(this).val(param['order_num']);
                   next.addClass('disable');
               }
           }else{
               if(param['price']['number']!=-1 && param['order_num']>=param['price']['number']){
                  next.addClass('disable');
               }else{
                 next.removeClass('disable');
               }
           }
           //减少
           if(val<=0){
              prev.addClass('disable')
           }else{
              prev.removeClass('disable') 
           }
           param[attr]=val;
       });
       //计算总价
       var total=0;
       if(param['price']['adult_price']){
        total=ST.Math.add(total,ST.Math.mul(param['adult_num'],Number(param['price']['adult_price'])));
       }
       if(param['price']['child_price']){
        total=ST.Math.add(total,ST.Math.mul(param['child_num'],Number(param['price']['child_price'])));
       }
       if(param['price']['old_price']){
        total=ST.Math.add(total,ST.Math.mul(param['old_num'],Number(param['price']['old_price'])));
       }
       if(param['price']['roombalance']){
        total=ST.Math.add(total,ST.Math.mul(param['roombalance_num'],Number(param['price']['roombalance'])));
       }
       total=total.toString().replace(/(\.\d)$/,'$1'+0);
       if(total>0){
          $('.btn-booking').removeClass('disable');
          $('.total_price').text('{Currency_Tool::symbol()}'+total);
       }else{
          $('.btn-booking').addClass('disable');
          $('.total_price').text('--');
       }
    }
    //预订
    $('.btn-booking').click(function(){
        if(!param['hasPrice']){
            $.layer({type:1, icon:2,time:1000, text:'团期已过期，请联系客服'});
            return;
        }
        if(!param['usedate']){
            $.layer({type:1, icon:2,time:1000, text:'请选择团期'});
            return;
        }
        if(param['price'] && param['price']['number']==0){
            $.layer({type:1, icon:2,time:1000, text:'订完'});
            return;
        }
        if($(this).hasClass('disable') || !param){
           return;
        }
         
        var url='{$cmsurl}line/over_book?';
        for(var k in param){
            if(k=='price' || k=='suit' || k =='currency'){
                  continue;
            }
            url += '&' + k + "=" + param[k];
        }
        window.location.href=url;
    });
    
</script>
</html>
